<template>
  <div class="page" v-loading="loading">
    <div style="display: flex;align-items: center;height: 47px;border-bottom: 1px solid #ddd;text-align: center;">
      <div style="flex: 3;border-right: 1px solid #ddd;height: 47px;line-height: 47px;">关卡信息</div>
      <div style="flex: 7;">题目信息</div>
    </div>
    <div style="display: flex;min-height: calc(100vh - 105px - 47px);">
      <div style="flex: 3;border-right: 1px solid #ddd;">
        <div style="margin: 15px;">
          <div style="display: flex;align-items: center;flex-wrap: wrap;">
            <el-button @click="selectLevel(item)" :class="{active:item.flag}" :key="index" v-for="(item,index) in levelList"
                       style="width: calc(22vmax / 5);height: calc(22vmax / 5);margin: 0 10px 15px 0px;"
              type="primary" plain>{{index+1}}</el-button>
          </div>
          <el-button type="primary" round style="width: 100%;" @click='drawer=true'>新增关卡</el-button>
        </div>
      </div>
      <div style="flex: 7;">
        <div style="margin: 15px;">
          <div style="display: flex;justify-content: flex-end;margin-bottom: 15px;">
            <el-button type="primary" @click="drawer=true; obj = current">添加题目</el-button>
            <el-button type="danger" @click="batchDelete()">批量删除</el-button>
          </div>
          <div v-if="answerList.length">
            <el-table :data="answerList" border @select="(item) => {deleteSelect = item;}">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="唯一编号" prop="id"></el-table-column>
              <el-table-column label="药名" prop="name"></el-table-column>
              <el-table-column label="创建时间" prop="createTime"></el-table-column>
              <el-table-column label="正确答案" prop="description"></el-table-column>
            </el-table>
          </div>
          <el-empty v-else description="当前关卡暂无题目信息"></el-empty>
        </div>
      </div>
    </div>
    <el-drawer title="添加题目" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
      <div style="padding: 0 15px 15px;">
        <div style="margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;">
          <div>已选择的题目</div>
          <div>
            <el-button type="primary" @click="save" v-if="obj == null">添加关卡</el-button>
            <el-button type="primary" @click="save" v-else>新增题目</el-button>
          </div>
        </div>
        <div style="margin-bottom: 15px;">
          <el-table :data="select" border>
            <el-table-column sortable label="唯一编号" width="120" prop="id"></el-table-column>
            <el-table-column label="药名" prop="name"></el-table-column>
            <el-table-column label="正确答案" prop="description"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="select = select.filter(item => item.id != scope.row.id)"><i
                    class="el-icon-delete"></i> 删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-bottom: 15px;">题目列表</div>
        <div style="margin-bottom: 15px;display: flex;align-items: center;">
          <el-input v-model="searchInfo.content" @keyup.enter.native="getAllAnswer" placeholder="请输入题目关键字搜索" style="margin-right: 15px;"></el-input>
          <el-button type="primary" @click="getAllAnswer"><i class="el-icon-search"></i> 搜索</el-button>
        </div>
        <div style="margin-bottom: 15px;">
          <el-table @select="selectAnswer" :data="allAnswerList" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="唯一编号" prop="id"></el-table-column>
            <el-table-column label="药名" prop="name"></el-table-column>
            <el-table-column label="正确答案" prop="description"></el-table-column>
          </el-table>
        </div>
        <div style="display: flex;align-items: center;">
          <el-pagination :total="total" :page-size="searchInfo.limit" @current-change="currentChange" background layout="prev,pager,next,jumper"></el-pagination>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    name: "manage-memory",
    data() {
      return {
        loading:false,
        levelList: [],
        answerList: [],
        allAnswerList: [],
        select: [],
        drawer: false,
        info: {
          barrierId: 0,
          changeMethod: 1
        },
        searchInfo: {
          content: '',
          limit: 10,
          page: 1,
          changeMethod: 1
        },
        total: 0,
        obj:null,
        current:{
          id:'',
          list:'',
        },
        deleteSelect:[]
      }
    },
    methods: {
      initPage() {
        this.$get("/barrier/list", {
          changeMethod: 1
        }).then(res => {
          if (res.code == 200) {
            res.data.map(item => item.flag = false)
            res.data[0].flag = true
            this.levelList = res.data
            this.info.barrierId = res.data[0].barrier.id
            this.current.is = res.data[0].barrier.id
            this.getDetail()
          }
        })
      },
      getDetail() {
        this.loading = true
        this.$get("/barrier/detail", this.info).then(res => {
          if (res.code == 200) {
            this.answerList = res.data
            this.current.list = this.answerList;
          }
          this.loading= false
        })
      },
      selectLevel(data){
        if(this.info.barrierId == data.barrier.id)return;
        this.levelList.map(item => item.flag = false)
        this.info.barrierId = data.barrier.id
        this.current.id = data.barrier.id
        this.getDetail()
        data.flag = true
      },
      getAllAnswer() {
        this.$get("/barrier/info_list", this.searchInfo).then(res => {
          if (res.code == 200) {
            this.allAnswerList = res.data.data
            this.total = res.data.count
          }
        })
      },
      selectAnswer(data, row) {
        if (!this.select.some(item => item.id == row.id)) this.select.push(row)
      },
      save() {
        let ids = this.select.map(item => item.id)
        if(this.obj != null){
          this.current.list.forEach(item =>{
            let flag = false;
            for(let i = 0, length = ids.length; i < length; i++){
              if(item === ids[i]){
                flag = true; break;
              }
            }
            if(!flag) ids.push(item.id);
          });
        }
        this.$post("/barrier/createOrUpdate", {
          id: this.obj == null ? null : this.obj.id,
          problemIds: ids.toString(),
          changeMethod: 1
        }).then(res => {
          if (res.code == 200) {
            this.drawer = false
            this.initPage()
            this.select = []
            this.searchInfo.content = ''
            this.$message.success("关卡添加成功")
          }
        })
      },
      currentChange(page) {
        this.searchInfo.page = page
        this.getAllAnswer()
      },
      handleClose(done) {
        this.obj = null;
        this.$confirm('当前所选择的题目暂未保存是否确认离开', '提示', {
          type: "warning"
        }).then(_ => {
          done();
        })
      },
      batchDelete(){
        if(this.deleteSelect.length == 0){
          return this.$message.warning("请选择要删除的题目");
        }
        this.$confirm("是否要删除这些题目？").then(ab => {
          let ids = [];
          this.current.list.forEach(item => {
            let flag = false;
            for(let i = 0, length = this.deleteSelect.length; i < length; i++){
              if(this.deleteSelect[i].id == item.id){
                flag = true; break;
              }
            }
            if(!flag) ids.push(item.id);
          })
          this.$post("/barrier/createOrUpdate", {
            id: this.current.id,
            problemIds: ids.toString(),
            changeMethod: 0
          }).then(res => {
            if (res.code == 200) {
              this.drawer = false
              this.initPage()
              this.select = []
              this.searchInfo.content = ''
              this.$message.success("删除成功");
            }
          })
        })
      }
    },
    created() {
      this.initPage()
      this.getAllAnswer()
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    border-radius: 8px;
    background-color: #fff;
    height: calc(100vh - 105px);
    overflow-y: auto;
    box-sizing: border-box;
  }

  .active {
    border: 1px solid #ff7800;
  }
</style>
